<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>抽号</title>
<style type="text/css">
body{margin:0px;color:#111111;font-family:Arial,Helvetica,sans-serif;font-size:14px;}
ul,li{
list-style-type:none;
margin:2px auto;
}
h2{
color: #006600;
    font: 14px/150% Arial,Helvetica,sans-serif;
    margin: 10px 20px 10px;
}
#main{
	width:980px;
	margin:0px auto;
	}
#content,#header,#footer{
	width:980px;
	margin:0px auto;
	
	}
#header{
	padding-top:10px;
}
#content{
padding-top:20px;
}
.left{
	float:left;
}
.left p{
	font-size:12px;
	text-indent:2px;
	margin: 2px auto;
}
.right{float:right;font-size:12px}
#content{
	padding-bottom:30px;
}
#footer{
	color:green;
}

#left-bar{
	width:280px;
	float:left;
	margin-right:10px;
	}
#right-bar{
	width:280px;
	float:right;
	}
#scroll-box {
  float: left;
  height: 250px;
  width: 400px;
}
.slot-box {
  float: left;
  height: 180px;
  margin:0px 10px;
  overflow: hidden;
  width: 400px;
}
.grid{

  text-align: center;
  color: #FFFFFF;
  font-size: 150px;
    height: 180px;
    width: 400px;
}
.clear{clear:both}
#stop {display:none}

.item-list{
	font-size:12px;
	 padding:2px 0 20px;
	 background-color:  #E9F4E9;
	 border-radius: 5px;
}
.result-list{
	 padding:2px 0 30px;
	 background-color:  #F4F4EC;
	 border-radius: 5px;
	 font-size:12px;
}
.result-list li{
	clear:both;
	padding:2px 0px 1px 
}
.grid div{
	border-radius: 30px;
	height: 180px;
    width: 180px;
    float:left;
    margin:0px 6px;
}

.l-l{
	float:left;
}
.l-r{
	float:right;
	margin-right:30px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<?php
$have_get_num_array = array();
foreach ($active_item['result'] as $val) {
	$have_get_num_array[] = $val['number'];
}
$have_get_num_array = "['".implode("','", $have_get_num_array)."']";
?>
var siteUrl = '{SITE_URL}';
var total='{$config[total-num]}';
var haveGetNumArray = {$have_get_num_array};
var thisItemId = {$active_item['id']};
;(function($){
	var OPTION = {
		total : 26,
		haveGetNumArray : [],
		startButtonId : 'start',
		stopButtonId : 'stop',
		speed : 1/20,
		afterStartClick : undefined,
		afterGetNum : undefined
	};
	
	function shuffle(v){
		for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
		return v;
	};
	
	function randomColor(){  //生成随机颜色代码
		return 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
	}
	
	$.fn.slot = function(option){
		var t = this;
		var option =  $.extend(OPTION, option || {});
	

		var html = [];
		for(var i=1; i<=OPTION.total; i++) {
			if(i.toString().length == 1) {
				html.push('<div class="grid"><div style="background-color:'+randomColor()+'">0</div><div style="background-color:'+randomColor()+'">'+i+'</div></div>');
			} else {
				var a = Math.floor(i/10),b = i%10;
				html.push('<div class="grid"><div style="background-color:'+randomColor()+'">'+a+'</div><div style="background-color:'+randomColor()+'">'+b+'</div></div>');
			}
		}
		html = shuffle(html);
		html = '<div class="slot-box"><div class="slot-bar">'+html.join('')+html.join('')+'</div></div>';
	
		$(t).append(html);
		
		var slotBars = $('.slot-bar', $(t));
		var resultNum = [];
		$('#'+OPTION.startButtonId).click(function(){  //注册开始事件
			OPTION.afterStartClick && OPTION.afterStartClick(OPTION);
			slotBars.each(function() {
				var boxs = $(this).find('div.grid');
				resultNum[this.id] = 0; 
				stop = false;
				run( $(this), parseInt($(this).css('margin-top')), boxs.length, boxs.height());
			});
		});
		$('#'+OPTION.stopButtonId).click(function(){  //注册结束事件
			endRun();
		});
		
		function validHasGet(num) {
			 return jQuery.inArray(num, OPTION.haveGetNumArray) !== -1;
		}
		
		var stop = false;
		var resNumArray = [],resnum;
		function run(slotBar, margin, boxNum, height) {
			if(margin <= -((boxNum-2)*height)) {
				margin = -height;
			}
			if(stop && margin%height==0) {
				var visibleDiv = slotBar.find('div.grid:eq('+(-margin/height-1)+')');
				var resNum = visibleDiv.text();
					if(!validHasGet(resNum)) {
					//if(true) {
						function slowStop(m) {
							m += Math.ceil((height-m%height)*0.1);
							slotBar.css('margin-top', m+'px');
							if(m%height == 0 ) {
								OPTION.afterGetNum && OPTION.afterGetNum(slotBar, visibleDiv, resNum, OPTION);
								return ;
							}
							setTimeout(function(){
								slowStop(m);
							}, 80);
						}
						slowStop(margin);
						return ;
					}
			};
			
			margin = margin - 90;
			slotBar.css('margin-top', margin+'px');

			setTimeout(function(){
				run(slotBar, margin, boxNum, height);
			}, 10);

		}
		function endRun (){
			stop = true;
		}
	}
})(jQuery);
$(function(){
	var num = [];
	$('.result-list li').each(function(){
		haveGetNumArray.push($(this).attr('data-num'));
	});
	$('#scroll-box').slot({
		haveGetNumArray:haveGetNumArray,
		afterGetNum:function(slotBar, visibleDiv, resNum, option){

			$.post(siteUrl+'arrange/save', {'num':resNum,'id':thisItemId}, function(response){
				if(response.state) {

					
					var left = slotBar.parent().offset().left;
					var top = slotBar.parent().offset().top;
					var width = slotBar.parent().width();
					var height = slotBar.parent().height();

					visibleDiv.clone().attr('id','movingBox').css({
					'position':'absolute',
					'left':left,
					'top':top,
					'width':width,
					'height':height,
					'opacity':1
					}).appendTo('body');

					var endPositionO = null;
					var resultListLi =$('.result-list li');
					var noFound = false;
					if($('#none').length==0) {
						resultListLi.each(function(){  //确定结束位置
							
							if(Number($(this).attr('data-num'))>Number(resNum)) {
								endPositionO = $(this);
								return false;
							}
						})
						if(endPositionO == null) {
							noFound = true; //没有找到比这个数大的，说明它在最后面 1
							endPositionO = $('.result-list ul');
						}
					} else {
						//还没有排名数据  2
						noFound = true;
						endPositionO = $('.result-list ul');
					}
					
					//1.2 属于同一种情况

					var endLeft = endPositionO.offset().left;
					var endTop = endPositionO.offset().top;
					$('#movingBox').find('div').css('border-radius',0).end().animate({
					'left':endLeft,
					'top':endTop,
					'opacity':0.3,
					'width':endPositionO.width(),
					'height':1,
					'font-size':'1px'
					},1000,function(){
						$('#movingBox').hide();
						var newLine = '<li style="display:none;background-color:#ACAC79"><div class="l-l">'+resNum+'：'+response.data['name']+'('+response.data['staff_id']+')</div> <div class="l-r">时间:'+response.data['get-time']+'</div><div class="clear"></div></li>';
						if(!noFound) {
							endPositionO.before(newLine).prev().slideDown();
						} else {
							$('#none').length != 0 && endPositionO.empty();
							endPositionO.append(newLine).children('li').slideDown();
						}
						
						$('#info').html("恭喜你抽到了"+resNum+'号！');
					});

				} else {
					alert(response.msg);
					$('#'+option.startButtonId).trigger('click');
				}
			},'json');

		},
		afterStartClick:function(option){
			$('#'+option.startButtonId).attr('disabled', true);
			$('#'+option.stopButtonId).fadeIn();
		}
	});
})
</script>
</head>

<body>

<div id="main">
	
	<div id="header">
			<div class="left">
			<h1>{$active_item['name']}</h1>
			{if $active_item['description']}<p>简介：{$active_item[description]}</p>{/if}
			</div>
			<div class="right">欢迎你，{$thisUserInfo['name']} <a href="{SITE_URL}arrange/logout">退出</a></div>
			<div class="clear"></div>
	</div>
	<div id="content">
	<div id="left-bar">
 <div class="item-list">
 <h2>项目列表</h2>
    <ul>
    {loop $items $item}
    	<li><a href="{SITE_URL}arrange/index/id/{$item['id']}"{if isset($id)}{if $id==$item['id']} style="font-weight:bold"{/if}{else}{if $active_item['id']==$item['id']} style="font-weight:bold"{/if}{/if}>{$item['name']}</a></li>
    {/loop}
    </ul>
  </div>
</div>
		<div id="scroll-box">
		</div>
      	
      	
<div id="right-bar">
<div class="result-list">
 <h2>抽号结果</h2>
{if !empty($active_item['result'])}
    <ul>
    {loop $sort_item_array  $staff}
    	<li data-num="{$staff[number]}" {if $staff['staff_id']==$thisUserInfo['staff_id']} style="background-color:#ACAC79;"{/if}><div class="l-l">{$staff[number]}：<?php echo $staff_info[$staff['staff_id']]['name'];?>({$staff[staff_id]})</div> <div class="l-r">时间:{date('m-d-H:i', $staff['get-time'])}</div><div class="clear"></div></li>
    {/loop}
    </ul>
{else}
	<ul>
    	<li id="none">尚未有人抽号!</li>
    </ul>
{/if}
</div>
</div>
<div class="clear"></div>
	</div>
	<div id="footer">
	{if !array_key_exists($thisUserInfo['staff_id'], $active_item['result'])}
    <p id="info">已经有 <span>{$have_select_num}</span> 个人抽号，剩余 <span>{$last_num}</span> 个号，马上开始<button type="button" id="start">抽号</button><button type="button" id="stop">停止</button></p>
    {else}
    <p id="info">
    您已经抽到了 <span><?php echo $active_item['result'][$thisUserInfo['staff_id']]['number']?></span> 号
    </p>
    {/if}
    </div>
</div>


</body>
</html>
